How to create multicolored text in a web page using HTML & CSS ?

2023-03-25 01:53| 来源: 网络整理| 查看: 265

In this article, we will learn to color the text in the web page using HTML & CSS. Basically, we can either use color attribute in HTML or linear-gradient to multi-color the text using CSS. We will explore both methods & understand their usage with the help of examples.

Methods :

color attribute: It is used to specify the text color inside the element. It can be used for every character that you want to apply color or an entire word.linear-gradient() function: It is used for text-styling in which the text is filled with linear-gradient color codes.

Method 1: Using color attribute.

Syntax :

Text content

Attribute Values:

hex_number: It sets the text color by using color hex code. For example “#0000ff”.rgb_number: It sets the text color by using RGB code. For example: “rgb(0, 153, 0)”.

Example:

HTML

Page Title h1 { color: green; font-size: 60px; } Welcome To G e e k s for G e e k s

Output:

Method 2: Using linear-gradient attribute.

Syntax:

background: linear-gradient(to left, color names); -webkit-background-clip: text; color: transparent;

Steps to add multicolor into text:

Add a simple text inside the tag with the required selector.Apply the linear gradient property with any colors of your choice.Apply webkit properties that will fill the text with the gradient background and declare the color property with transparent background.

Example:

HTML

.multicolor-text { text-align: center; font-size: 50px; background: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red); -webkit-background-clip: text; color: transparent; } Welcome To GeeksforGeeks!

Output:

My Personal Notes arrow_drop_up

【本文地址】

公司简介

联系我们